<script setup lang="ts">
import min from '@/assets/img/desktop/min.png'
import max from '@/assets/img/desktop/max.png'
import close from '@/assets/img/desktop/close.png'
import { inject, ref } from 'vue'
import { MenuType } from '@/views/desktop/type'

const props = defineProps({
  fullScreen: Boolean,
  menu: MenuType,
  width: String,
  title: String,
})
let bottomMenus = inject('bottomMenus', ref<MenuType[]>([]))
let dialogVisible = inject('dialogVisible')
let emit = defineEmits(['setFullScreen'])

const dialogOperateMap = {
  max: () => {
    emit('setFullScreen')
  },
  min: () => {
    let index = bottomMenus.value.findIndex((item) => item.id == props.menu.id)
    if (index < 0) {
      bottomMenus.value.push(props.menu)
    }
    dialogVisible.value[props.menu.id] = false
  },
  close: () => {
    dialogVisible.value[props.menu.id] = false
    bottomMenus.value = bottomMenus.value.filter(
      (item) => item.id != props.menu.id,
    )
  },
}

const openHandler = () => {
  //获取对话框Dom
  var overlay = document.querySelector('.is-draggable')
  // 设置pointerEvents='auto',使对话框可以正常操作
  overlay.style.pointerEvents = 'auto'
  //通过对话框Dom获取遮罩层Dom,修改其pointerEvents = 'none',使其他区域可正常操作
  //第一层遮罩层
  var overlayFa = overlay.parentNode
  overlayFa.style.pointerEvents = 'none'
  //第二层遮罩层
  var overlayGfa = overlay.parentNode.parentNode
  overlayGfa.style.pointerEvents = 'none'
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible[props.menu.id]"
    :width="props.width"
    :show-close="false"
    draggable
    :modal="false"
    :fullscreen="props.fullScreen"
    style="overflow: hidden"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    @open="openHandler"
  >
    <template #header="">
      <div
        class="w-full flex flex-row items-center justify-between absolute top-0"
      >
        <span>{{ props.title }}</span>
        <span class="flex flex-row mr-8">
          <img
            :src="min"
            alt="最小化"
            class="m-3 h-3 cursor-pointer"
            @click="dialogOperateMap.min()"
          />
          <img
            :src="max"
            alt="最大化"
            class="m-3 h-3 cursor-pointer"
            @click="dialogOperateMap.max()"
          />
          <img
            :src="close"
            alt="关闭"
            class="m-3 h-3 cursor-pointer"
            @click="dialogOperateMap.close()"
          />
        </span>
      </div>
    </template>

    <slot></slot>
  </el-dialog>
</template>

<style scoped></style>
